<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表格与表单示例</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
h1, h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.container {
margin-bottom: 40px;
}
/* 新增：标签作用说明样式 */
.tag-desc {
background-color: #f0f7ff;
border-left: 4px solid #2196f3;
padding: 12px 18px;
margin: 15px 0;
border-radius: 0 4px 4px 0;
}
.tag-desc h3 {
margin: 0 0 8px;
color: #1976d2;
font-size: 1.05rem;
}
.tag-desc p {
margin: 5px 0;
line-height: 1.5;
}
.tag-desc code {
background-color: #fff;
padding: 2px 6px;
border-radius: 2px;
color: #d32f2f;
}
/* 表格基础样式 */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
caption {
font-weight: bold;
margin-bottom: 10px;
font-size: 1.1em;
}
/* 表单基础样式 */
form {
background-color: #f8f9fa;
padding: 25px;
border-radius: 8px;
margin-top: 20px;
}
fieldset {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
color: #3498db;
padding: 0 10px;
}
label {
display: inline-block;
width: 120px;
margin-bottom: 10px;
}
input, select, textarea {
width: 70%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
input[type="radio"], input[type="checkbox"] {
width: auto;
margin-right: 10px;
}
input[type="file"] {
padding: 5px 0;
}
.radio-group, .checkbox-group {
margin-bottom: 15px;
}
.radio-group label, .checkbox-group label {
width: auto;
margin-right: 15px;
}
button {
background-color: #3498db;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button[type="reset"] {
background-color: #e74c3c;
}
button[type="button"] {
background-color: #95a5a6;
}
button:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<h1>HTML表格与表单标签应用示例</h1>

<!-- 表格部分 -->
<div>
<h2>1. 表格标签应用</h2>
<!-- 新增：表格核心标签作用说明 -->
<div class="tag-desc">
<h3>表格核心标签功能说明</h3>
<p><code>&lt;table&gt;</code>：表格容器标签，包裹所有表格相关内容；</p>
<p><code>&lt;caption&gt;</code>：表格标题标签，显示在表格上方，说明表格主题；</p>
<p><code>&lt;thead&gt;/&lt;tbody&gt;/&lt;tfoot&gt;</code>：表格结构分区标签，分别对应“表头”“表体”“表尾”，提升代码可读性；</p>
<p><code>&lt;tr&gt;</code>：表格行标签，定义表格中的一行；</p>
<p><code>&lt;th&gt;</code>：表头单元格标签，用于表格列标题（默认加粗居中）；</p>
<p><code>&lt;td&gt;</code>：普通单元格标签，用于表格数据内容；</p>
<p><code>colspan/rowspan</code>：单元格合并属性，colspan合并列，rowspan合并行。</p>
</div>

<h3>基本学生信息表</h3>
<!-- <table>：表格容器，包裹整个学生信息表 -->
<table>
<!-- <caption>：表格标题，说明表格为“计算机系学生信息表” -->
<caption>计算机系学生信息表</caption>
<!-- <thead>：表格头部区域，存放列标题 -->
<thead>
<!-- <tr>：表头行，包含5个表头单元格 -->
<tr>
<!-- <<th>：表头单元格，定义“学号”“姓名”等列标题 -->
<<th>学号</</th>
<<th>姓名</</th>
<<th>性别</</th>
<<th>专业</</th>
<<th>入学年份</</th>
</tr>
</thead>
<!-- <tbody>：表格主体区域，存放核心数据 -->
<tbody>
<!-- <tr>：数据行，每行包含5个普通单元格 -->
<tr>
<!-- <td>：普通单元格，存放具体学生数据 -->
<td>2023001</td>
<td>张三</td>
<td>男</td>
<td>计算机科学</td>
<td>2023</td>
</tr>
<tr>
<td>2023002</td>
<td>李四</td>
<td>女</td>
<td>软件工程</td>
<td>2023</td>
</tr>
<tr>
<td>2022005</td>
<td>王五</td>
<td>男</td>
<td>人工智能</td>
<td>2022</td>
</tr>
</tbody>
<!-- <<tfoot>：表格尾部区域，存放汇总信息 -->
<<tfoot>
<tr>
<!-- colspan="5"：合并5列单元格，显示“总计”信息 -->
<td colspan="5">总计：3名学生</td>
</tr>
</</tfoot>
</table>

<h3>带合并单元格的课程表</h3>
<table>
<caption>每周课程安排表</caption>
<tr>
<<th>时间/星期</</th>
<<th>周一</</th>
<<th>周二</</th>
<<th>周三</</th>
<<th>周四</</th>
<<th>周五</</th>
</tr>
<tr>
<td>上午</td>
<td>高等数学</td>
<td>数据结构</td>
<td>计算机网络</td>
<td>操作系统</td>
<td>数据库原理</td>
</tr>
<tr>
<td>下午</td>
<td>程序设计</td>
<!-- rowspan="2"：合并2行单元格，“社团活动”占据“下午+晚上”两行 -->
<td rowspan="2">社团活动</td>
<td>英语</td>
<td>物理</td>
<!-- rowspan="2"：合并2行单元格，“体育”占据“下午+晚上”两行 -->
<td rowspan="2">体育</td>
</tr>
<tr>
<td>晚上</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
</tr>
</table>
</div>

<!-- 表单部分 -->
<div>
<h2>2. 表单标签应用</h2>
<!-- 新增：表单核心标签作用说明 -->
<div class="tag-desc">
<h3>表单核心标签功能说明</h3>
<p><code>&lt;form&gt;</code>：表单容器标签，定义表单范围，action指定提交地址，method指定提交方式；</p>
<p><code>&lt;fieldset&gt;/&lt;legend&gt;</code>：表单分组标签，fieldset包裹一组相关表单元素，legend定义分组标题；</p>
<p><code>&lt;label&gt;</code>：表单标签，绑定input元素（通过for属性关联id），点击标签可激活输入框；</p>
<p><code>&lt;input&gt;</code>：输入框标签，type属性控制输入类型（text文本、email邮箱、radio单选等）；</p>
<p><code>&lt;select&gt;/&lt;option&gt;</code>：下拉选择框标签，select为容器，option为具体选项；</p>
<p><code>&lt;textarea&gt;</code>：多行文本框标签，用于输入大段文字（rows/cols控制尺寸）；</p>
<p><code>&lt;button&gt;</code>：按钮标签，type属性控制按钮功能（submit提交、reset重置、button普通按钮）。</p>
</div>

<!-- <form>：表单容器，action="/submit-form"指定数据提交地址，method="POST"指定提交方式 -->
<form action="/submit-form" method="POST">
<!-- <fieldset>：表单分组，将“用户注册”相关元素归为一组 -->
<fieldset>
<!-- <legend>：分组标题，说明该组为“用户注册表单” -->
<legend>用户注册表单</legend>

<!-- <label>：绑定“姓名”输入框，for="fullname"关联input的id="fullname" -->
<label for="fullname">姓名:</label>
<!-- <input type="text">：单行文本输入框，required表示“必填”，placeholder显示提示文字 -->
<input type="text" id="fullname" name="fullname" required placeholder="请输入您的姓名"><br>

<label for="email">电子邮箱:</label>
<!-- <input type="email">：邮箱类型输入框，自动验证格式是否为邮箱 -->
<input type="email" id="email" name="email" required placeholder="your@email.com"><br>

<label for="phone">手机号码:</label>
<!-- <input type="tel">：电话类型输入框，pattern="[0-9]{11}"限制输入为11位数字 -->
<input type="tel" id="phone" name="phone" pattern="[0-9]{11}" placeholder="11位手机号码"><br>
<label for="birthdate">出生日期:</label>
<!-- <input type="date">：日期选择框，点击可弹出日历选择日期 -->
<input type="date" id="birthdate" name="birthdate"><br>

<label>性别:</label>
<div>
<!-- <input type="radio">：单选框，name相同为一组（互斥选择），value为提交的数值 -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">其他</label>
</div>
<label for="education">最高学历:</label>
<!-- <select>：下拉选择框，<option>为具体选项，value为提交的数值 -->
<select id="education" name="education">
<option value="">--请选择--</option>
<option value="highschool">高中及以下</option>
<option value="college">专科</option>
<option value="bachelor">本科</option>
<option value="master">硕士</option>
<option value="phd">博士及以上</option>
</select><br>

<label>兴趣爱好:</label>
<div>
<!-- <input type="checkbox">：复选框，name相同为一组（可多选） -->
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">旅行</label>
<input type="checkbox" id="gaming" name="hobbies" value="gaming">
<label for="gaming">游戏</label>
<input type="checkbox" id="photography" name="hobbies" value="photography">
<label for="photography">摄影</label>
</div>
<label for="resume">上传简历:</label>
<!-- <input type="file">：文件上传框，accept=".doc,.docx,.pdf"限制上传文件类型 -->
<input type="file" id="resume" name="resume" accept=".doc,.docx,.pdf"><br>
<label for="message">个人简介:</label><br>
<!-- <textarea>：多行文本框，rows="5"控制高度（5行），cols="50"控制宽度 -->
<textarea id="message" name="message" rows="5" cols="50" placeholder="请简要介绍一下自己..."></textarea><br>

<label for="agreement">
<!-- <input type="checkbox" required>：必填复选框，需勾选才能提交表单 -->
<input type="checkbox" id="agreement" name="agreement" required>
我已阅读并同意<a href="#" target="_blank">用户协议</a>和<a href="#" target="_blank">隐私政策</a>
</label><br><br>
<!-- <button type="submit">：提交按钮，点击提交表单数据到action指定地址 -->
<button type="submit">提交注册</button>
<!-- <button type="reset">：重置按钮，点击清空表单内所有输入内容 -->
<button type="reset">重置表单</button>
<!-- <button type="button">：普通按钮，无默认功能，需通过onclick绑定自定义事件（此处弹出提示） -->
<button type="button" onclick　="alert('表单验证中...')">验证信息</button>
</fieldset>
</form>
</div>
</body>
</html>